import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import { Button } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';
import { useHistory } from "react-router-dom";

const useStyles = makeStyles(theme => ({
  textWhite: {
    color: 'white',
    textTransform: 'uppercase',
  },
}));

const Welcome = props => {
  const { className, data, ...rest } = props;
  const classes = useStyles();
  const history = useHistory();
  
  const buttonAction = (link) => {
    history.push(link);
  }

  if (data.image) {
    return <div className={className} {...rest}>
      <SectionHeader
        title={<span className={classes.textWhite}>{data.title}</span>}
        titleVariant="h1"
        subtitle={<span className={classes.textWhite}>{data.sub_title}</span>}
        ctaGroup={[
          <Button variant="outlined" color="secondary" size="large" onClick={ e => {
            e.stopPropagation();
            buttonAction(data.button_action); }}>
            {data.button_title}
          </Button>,
        ]}
        disableGutter
        data-aos="fade-up"
      />
    </div>
  } else {
    return (
      <div className={clsx('jarallax', className)} {...rest}>
        <SectionHeader
          title={data.title}
          titleVariant="h2"
          subtitle={data.sub_title}
          ctaGroup={[
            <Button variant="contained" color="primary" size="large" onClick={ e => {
              e.stopPropagation();
              buttonAction(data.button_action); }}>
              {data.button_title}
            </Button>,
          ]}
          disableGutter
          data-aos="fade-up"
        />
      </div>
    );
  }
};

Welcome.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  data: PropTypes.object
};

export default Welcome;
